// 首页脚本
new Vue({
  el: '#app',
  data() {
    return {
      // 用户信息
      isLoggedIn: false,
      userName: '未登录',
      
      // 统计数据
      totalCard: 0,
      completedCount: 0,
      todoCard: 0,
      currentTime: '',
      
      // 搜索和筛选
      searchKeyword: '',
      drawerVisible: false,
      
      // 当前选择的维度
      currentDimension: 'time',
      dimensions: [
        { value: 'time', label: '时间维度' },
        { value: 'owner', label: '责任人维度' },
        { value: 'priority', label: '优先级维度' },
        { value: 'status', label: '状态维度' }
      ],
      
      // 筛选器选项
      filters: {
        owners: [],
        priorities: [],
        statuses: []
      },
      
      // 筛选器可选项
      ownerOptions: [
        { value: 'user1', label: '张三' },
        { value: 'user2', label: '李四' },
        { value: 'user3', label: '王五' }
      ],
      priorityOptions: [
        { value: 'high', label: '高级' },
        { value: 'medium', label: '中级' },
        { value: 'low', label: '低级' }
      ],
      statusOptions: [
        { value: 'completed', label: '已完成' },
        { value: 'inProgress', label: '进行中' },
        { value: 'todo', label: '待办' }
      ],
      
      // 卡片数据（示例数据）
      cardGroups: [
        {
          title: '今日',
          dimension: 'time',
          value: 'today',
          cards: [
            {
              uuid: '1',
              title: '完成前端UI设计',
              content: '使用Element UI组件库完成所有页面的设计和实现',
              owner: '张三',
              views: 10,
              priority: '高级',
              status: '进行中',
              selected: false
            },
            {
              uuid: '2',
              title: '编写API文档',
              content: '为所有接口编写详细的API文档，包括参数说明和返回值',
              owner: '李四',
              views: 5,
              priority: '中级',
              status: '待办',
              selected: false
            }
          ]
        },
        {
          title: '本周',
          dimension: 'time',
          value: 'thisWeek',
          cards: [
            {
              uuid: '3',
              title: '数据库设计',
              content: '设计项目所需的数据库结构，包括表结构和关系',
              owner: '王五',
              views: 8,
              priority: '高级',
              status: '已完成',
              selected: false
            },
            {
              uuid: '4',
              title: '实现登录注册功能',
              content: '完成用户登录和注册功能的前后端实现',
              owner: '张三',
              views: 15,
              priority: '中级',
              status: '进行中',
              selected: false
            }
          ]
        },
        {
          title: '高优先级',
          dimension: 'priority',
          value: 'high',
          cards: [
            {
              uuid: '1',
              title: '完成前端UI设计',
              content: '使用Element UI组件库完成所有页面的设计和实现',
              owner: '张三',
              views: 10,
              priority: '高级',
              status: '进行中',
              selected: false
            },
            {
              uuid: '3',
              title: '数据库设计',
              content: '设计项目所需的数据库结构，包括表结构和关系',
              owner: '王五',
              views: 8,
              priority: '高级',
              status: '已完成',
              selected: false
            }
          ]
        }
      ]
    };
  },
  computed: {
    // 判断是否有选中的卡片
    hasSelectedCards() {
      return this.cardGroups.some(group => 
        group.cards.some(card => card.selected)
      );
    }
  },
  created() {
    // 获取初始数据
    this.fetchData();
    
    // 设置时间更新
    this.updateCurrentTime();
    setInterval(this.updateCurrentTime, 1000);
  },
  methods: {
    // 初始化数据
    fetchData() {
      // 模拟从后端获取数据
      // 实际项目中这里应该调用后端API
      
      // 更新统计数据
      this.totalCard = 10;
      this.completedCount = 3;
      this.todoCard = 7;
    },
    
    // 更新当前时间
    updateCurrentTime() {
      const now = new Date();
      this.currentTime = now.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false
      });
    },
    
    // 获取优先级对应的类型
    getPriorityType(priority) {
      switch(priority) {
        case '高级': return 'danger';
        case '中级': return 'warning';
        case '低级': return 'success';
        default: return 'info';
      }
    },
    
    // 查看卡片详情
    viewCardDetail(card) {
      // 实际应用中跳转到详情页面
      // 这里使用window.location.href或路由跳转
      console.log('查看卡片详情:', card.uuid);
    },
    
    // 查看更多卡片
    viewMoreCards(dimension, value) {
      // 实际应用中跳转到维度页面
      console.log('查看更多卡片:', dimension, value);
    },
    
    // 创建新卡片
    createNewCard() {
      // 实际应用中跳转到创建卡片页面
      console.log('创建新卡片');
    },
    
    // 删除选中的卡片
    deleteSelectedCards() {
      // 实际应用中调用后端API删除卡片
      this.$confirm('确认删除选中的卡片?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 过滤已选中的卡片
        this.cardGroups.forEach(group => {
          group.cards = group.cards.filter(card => !card.selected);
        });
        
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    
    // 重置筛选器
    resetFilters() {
      this.filters = {
        owners: [],
        priorities: [],
        statuses: []
      };
    },
    
    // 应用筛选
    applyFilters() {
      // 实际应用中调用后端API筛选数据
      console.log('应用筛选:', this.filters);
      this.drawerVisible = false;
    },
    
    // 页面跳转方法
    goToLogin() {
      // 跳转到登录页面
      console.log('跳转到登录页面');
    },
    
    goToRegister() {
      // 跳转到注册页面
      console.log('跳转到注册页面');
    },
    
    goToUserDetail() {
      // 跳转到用户详情页面
      console.log('跳转到用户详情页面');
    },
    
    goToCardManagement() {
      // 跳转到卡片管理页面
      console.log('跳转到卡片管理页面');
    },
    
    goToMessagePage() {
      // 跳转到消息页面
      console.log('跳转到消息页面');
    },
    
    logout() {
      // 退出登录
      this.isLoggedIn = false;
      this.userName = '未登录';
    }
  }
}); 